<template>
    <div>
        <Modal :z-index="1"
               width="800px"
               v-model="modal.editQuotaTableFlag"
               footer-hide
               :styles="{top: '10px'}"
               title="表格编辑">
            <Drawer title="表格选项编辑"
                    width="60%"
                    placement="left"
                    :closable="true"
                    v-model="DrawerFlag">
                <Split v-model="split1">
                    <div class="madiv2" slot="left">
                        <scoreitem ref="scoreitem" :modal="modal"/>
                    </div>
                    <div class="mydiv3" slot="right">
                        <questions ref="questions" :modal="modal"/>
                    </div>
                </Split>
            </Drawer>
            <Row type="flex" justify="center" align="middle" class="code-row-bg">
                <h2 v-if="modal.evaluate!=null">{{modal.evaluate.evaluateName}}</h2>
            </Row>
            <Row type="flex" justify="center" align="middle">
                <Col style="margin-left: 10px" span="23">
                    <Button icon="ios-build" type="info" class="floatLfet mybtn1" @click="DrawerFlag = true">编辑表格
                    </Button>
                    <Button icon="ios-print" type="primary" class="floatLfet mybtn1" v-print="printObj">打印
                    </Button>
                </Col>
            </Row>
            <Row type="flex" justify="center" align="middle">
                <Card class="mycard" style="width:718px" :padding=0>
                    <div id="print">
                        <Table v-for="(item,index) in data"
                               :key="index"
                               size="small"
                               :show-header="item.length>0 && item[0].type=='选项'"
                               :loading="loading"
                               :columns="item.length>0 && item[0].type=='选项' ?columns:columns2"
                               :data="item">
                        </Table>
                    </div>
                </Card>
            </Row>
          <br/>
        </Modal>
    </div>
</template>

<script>
    import scoreitem from "./scoreitem";
    import questions from "./questions"

    export default {
        components: {
            scoreitem,
            questions
        },
        name: "editQuotaTable",
        props: {
            modal: {
                editQuotaTableFlag: false,
                evaluate: null
            }
        },
        data() {
            return {
                printObj: {
                    id: "print",
                    popTitle: '评价表格',
                    extraCss: 'https://www.google.com,https://www.google.com',
                    extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'
                },
                DrawerFlag: false,
                loading: false,
                columns: [
                    {
                        title: '评价项',
                        width: 100,
                        key: "evaluationitem"
                    },
                    {
                        type: 'index',
                        width: 70,
                        title: '序号',
                        align: 'center'
                    },
                    {
                        title: '评价内容',
                        key: "commentcontent"
                    },
                    {
                        title: '权重',
                        width: 200,
                        render: (h, params) => {
                            if (!params.row.scoring) {
                                return <radio-group>
                                    {
                                        params.row.scoreitemDOList.map(m => {
                                            return <Radio label={m.fraction}>{m.content}</Radio>
                                        })
                                    }
                                </radio-group>
                            } else {
                                let max = Math.max.apply(Math, params.row.scoreitemDOList.map(m => {
                                    return m.fraction
                                }));
                                return <i-input placeholder={`共:${max} 得分:`}/>/*<Slider transfer show-tip="never" max={max} show-input></Slider>*/

                            }
                        }
                    },
                ],
                columns2: [
                    {
                        //   className: 'demo-table-info-column',
                        render: (h, params) => {
                            return <div>
                                <i-input rows={5} style="margin-left:-17px;width:105%" type="textarea"
                                         placeholder={params.row.commentcontent}></i-input>
                            </div>
                        }
                    },
                ],
                data: [],
                split: 0.5,
                split1: 0.2
            }
        },
        methods: {
            getAllQuestionByeid() {
                this.loading = true
                this.http.get(`/question/getAllQuestionByeid/${this.modal.evaluate.eid}`).then(res => {
                    if (res.data) {
                        this.data = []
                        let array = res.data.filter(f => f.type === "选项")
                        let array2 = res.data.filter(f => f.type === "文本")
                        if (array.length > 0) {
                            this.data.push(array)
                        }
                        if (array2.length > 0) {
                            this.data.push(array2)
                        }
                    }
                }).finally(f => {
                    this.loading = false
                })
            }
        },
        watch: {
            'modal.editQuotaTableFlag'(val) {
                if (val) {
                    this.getAllQuestionByeid()
                    this.$refs.scoreitem.getAllScoreitemById()
                    this.$refs.questions.getAllQuestionByeid()
                }
            },
            DrawerFlag(val) {
                this.getAllQuestionByeid()
            }
        },
    }
</script>

<style lang="less">
    .ivu-card-head {
        padding: 7px 16px 6px;
    }


    .madiv {
        height: 100%;
    }

    .madiv2 {
        height: 100%;
        max-height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .ivu-modal-body {
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .code-row-bg {
        padding-top: 10px;
    }

    .mydiv3 {
        padding-left: 20px;
        height: 100%;
        max-height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .ivu-drawer-body {
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .ivu-table td.demo-table-info-column {
    }

</style>
